Vue Js Enable Disable Radio Button: In Vue.js, you can enable or disable a radio button by binding the “disabled” attribute to a Boolean value in your data model. For example, if you have a data property called “isDisabled” that is initially set to true, you can toggle the disabled state of the radio button by changing the value of “isDisabled” on the click button. Here in this example, we will learn how to toggle the radio button’s disability on the click button
How to Enable or Disable Radio Button on Click in Vue Js?
In Vue.js, you can enable or disable a radio button on click by using a method that toggles the value of a Boolean data property that is bound to the “disabled” attribute of the radio button. The example below shows how to toggle the radio button’s disability.
Vue Js Enable Disable Radio Button on Click | Example
<div id="app">
<button @click="isDisabled = !isDisabled">Toggle Disability</button><br>
<div v-for='(option,index) in options'>
<input :disabled="isDisabled" type="radio" :id="index" v-model="selectedValue" :value="option" :checked="selectedValue === 'option'">{{option}}
</div>
<pre>Get Selected Value: {{selectedValue}}</pre>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
options: ['HTML', 'CSS', 'Javascript', 'Vue', 'Angular', 'React', 'Node'],
selectedValue: '',
isDisabled: true
}
},
});
</script>
Output of above example
